<template>
    <div class="block">
        <el-row>
            <el-col :span="24" class="qryform">
                代码: <el-input style="width:120px" v-model="code" clearable/>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="primary" class="ml20" @click="preQuery">查询</el-button>

            </el-col>
        </el-row>
        <el-row v-if="info.code">
            <el-form style="border:1px lightgray dotted;margin:0px 20px;padding:10px;" size="mini" >
                <el-form-item label="日期:">{{info.record_date}}</el-form-item>
                <el-form-item label="代码:">{{info.code}}</el-form-item>
                <el-form-item label="名称:">{{info.name}}</el-form-item>
                <el-form-item label="价格:">{{info.price}}</el-form-item>
                <el-form-item label=""><gtChart :stockInfo="info"></gtChart></el-form-item>
                <el-form-item label="描述:"><el-input v-model="desc" style="width:80%;min-width:500px;" clearable></el-input></el-form-item>
                <el-form-item label=""><el-button type="primary" @click="addRecord" style="margin-left:50px;">添加记录</el-button></el-form-item>
            </el-form>
        </el-row>
    </div>
</template>


<script>
import config from '~/config'
import dayjs from '~/plugins/day';

import datadict from '~/plugins/dict';

import gtChart from '~/components/stock/gtChart.vue';
export default {
    components:{
        gtChart
    },
    data() {
        return {
            tableheight: null,
            code : "600756",
            desc : "",
            info :{
                code: "",
                name: "",
            }
        }
    },
     

    mounted() {
        this.preQuery();
    },

    methods: {
        addComp(item){
            window.$vue.addCompItem(item);
        },
        preQuery() {
            if(!this.code || this.code.length!=6){
                this.$message.error("代码格式错误");
                return;
            }
            this.info = {};
            this.$axios.get(`${config.sapi}/api/stock/preQuery?code=${this.code}`)
            .then((res) => {
                if (res.data.code == 200) {
                    this.info = res.data.data;
                    if(this.info.detail_data)
                        this.info.detail_data = JSON.parse(this.info.detail_data);
                } else {
                    this.$message.error(res.data.message);
                }
            })

        },
        addRecord(){
            if(!this.info.code){
                this.$message.error("代码格式错误");
                return;
            }
            if(!this.desc){
                this.$message.error("请添加描述");
                return;
            }
            var param ={
                code: this.info.code,
                desc: this.desc,
            }
            
            this.$axios.post(`${config.sapi}/api/stock/add`,param)
            .then((res) => {
                if (res.data.code == 200) {
                    this.$message.success("添加成功");
                } else {
                    this.$message.error(res.data.message);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.flexdiv {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    button{
        margin-left: 10px;
    }
}

.qryform{
    margin-bottom:10px;
    button{
        margin-top:0px;
        vertical-align: middle;
    }
}
.order-class{
    display: inline-block;
    margin-right: 10px;
    min-width: 50px;
}

.red{
    color: red;
}
.green{
    color: green;
}
.yellow{
    color: rgb(96, 22, 233)
}
.link-item{
    font-size: 12px;
}

</style>
